<!DOCTYPE html>
<html>
<head>
    <title>产品列表</title>
    <style>
         h1 {
            text-align: center; /* 水平居中 */
        }
         h2 {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
        table {
           /*  width: 100%; 使表格宽度占满容器 */
            width: 1200px;
            border-collapse: collapse; /* 合并边框 */
            margin: 0 auto; /* 上下外边距为 0，左右外边距自动，实现水平居中 */
        }
        th, td {
            text-align: center; /* 文本居中 */
            padding: 8px; /* 添加内边距 */
            border: 1px solid #ddd; /* 设置边框样式 */
        }
        th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
        .price-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* 垂直居中 */
        }
        .new-price-input {
            width: 60px;
            margin-top: 5px; /* 与按钮的间距 */
        }
        .update-button {
            margin-top: 5px; /* 与输入框的间距 */
        }
        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .search-input {
            width: 150px;
            padding: 8px;
            margin-right: 10px;
        }
        .search-button {
            padding: 8px 16px;
        }
         .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .pagination a {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        .pagination a:hover {
            background-color: #007BFF;
            color: white;
        }
        .pagination .active {
            background-color: #007BFF;
            color: white;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .pagination a, .pagination span {
            padding: 8px 15px;
            margin: 0 5px;
            background-color: #f2f2f2;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
        }
        
        .pagination a:hover, .pagination .active {
            background-color: #007BFF;
            color: white;
        }
        
        .pagination .ellipsis {
            padding: 8px 15px;
            margin: 0 5px;
            color: #333;
}

        .link-container {
            width: 100%; /* 宽度与表格一致 */
            text-align: left; /* 左对齐 */
            margin: 20px auto; /* 上下外边距，左右外边距自动 */
            max-width: 1200px; /* 与表格的最大宽度一致 */
        }
    </style>
</head>
<body>
    <h1>产品列表</h1>
    <div class="search-container">
        <form method="GET" action="{{ url_for('list_products') }}">
            <input type="text" name="name" value="{{ name }}" placeholder="输入产品名称" class="search-input">
            <select name="sort" class="search-input">
                <option value="id" {% if sort == 'id' %}selected{% endif %}>ID</option>
                <option value="name" {% if sort == 'name' %}selected{% endif %}>产品名称</option>
                <option value="price" {% if sort == 'price' %}selected{% endif %}>标签价格</option>
                <option value="quantity" {% if sort == 'quantity' %}selected{% endif %}>库存数量</option>
                <option value="total_value" {% if sort == 'total_value' %}selected{% endif %}>货值</option>
            </select>
            <select name="order" class="search-input">
                <option value="asc" {% if order == 'asc' %}selected{% endif %}>升序</option>
                <option value="desc" {% if order == 'desc' %}selected{% endif %}>降序</option>
            </select>
            <button type="submit" class="search-button">搜索</button>
        </form>
    </div>
    <div class="link-container">
    <a href="{{ url_for('add_product') }}">添加新产品</a>
    </div>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>单位</th>
                <th>标签价格</th>
                <th>平均进价</th>
                <th>库存数量</th>
                <th>货值</th>
                <th>图片</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for product in products.items %}
            <tr>
                <td>{{ product.id }}</td>
                <td>{{ product.name }}</td>
                <td>{{ product.unit }}</td> <!-- 显示单位 -->
                <td>
                    <div class="price-container">
                        <span>{{ product.price }}</span>
                        <form method="POST" action="{{ url_for('list_products') }}" class="price-form">
                            <input type="hidden" name="product_id" value="{{ product.id }}">
                            <input type="number" name="new_price" step="0.01" placeholder="新价格" required class="new-price-input">
                            <button type="submit" class="update-button">更新</button>
                        </form>
                    </div>
                </td>
                <td>{{ product_avg_purchase_prices[product.id] | round(2) }}</td> <!-- 显示平均进货价格 -->
                <td>{{ product.quantity }}</td>
                <td>{{ product.quantity * product.price | round(2) }}</td>
                <td>
                    {% if product.image_url %}
                        <img src="{{ product.image_url }}" alt="产品图片" style="width: 100px; height: 100px;">
                    {% else %}
                        <span>无图片</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ url_for('sell_product', product_id=product.id) }}">销售</a> |
                    <a href="{{ url_for('purchase_product', product_id=product.id) }}">采购</a> |
                    {% if product.quantity == 0 %}
                        <a href="{{ url_for('delete_product', product_id=product.id) }}">删除</a> |
                    {% endif %}
                    <a href="{{ url_for('change_product_image', product_id=product.id) }}">变更图片</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <h2>库存总数量:{{ total_quantity }} 总净值:{{ total_net_value | round(2) }} 总货值:{{ total_value | round(2) }}</h2>

    <div class="pagination">
        {% if products.has_prev %}
            <a href="{{ url_for('list_products', page=products.prev_num, name=name, sort=sort, order=order) }}">上一页</a>
        {% endif %}
        
        {% for page_num in products.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if page_num %}
                {% if page_num == products.page %}
                    <span class="active">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('list_products', page=page_num, name=name, sort=sort, order=order) }}">{{ page_num }}</a>
                {% endif %}
            {% else %}
                <span class="ellipsis">…</span>
            {% endif %}
        {% endfor %}
        
        {% if products.has_next %}
            <a href="{{ url_for('list_products', page=products.next_num, name=name, sort=sort, order=order) }}">下一页</a>
        {% endif %}
    </div>
    <div class="link-container">
        <a href="{{ url_for('list_products') }}">返回产品列表</a>
        <a href="{{ url_for('index') }}">返回主页</a>
    </div>
</body>
</html>